<template>
  <div id="taskPackageIndex">
    <c-title :hide="false" text="普法任务"></c-title>
    <van-tabs v-model="active" sticky :offset-top="40" @click="getData" swipeable>
      <van-tab title="任务商城">
        <div class="List" v-show="active == 0">
          <template v-if="tabOptions[0] && tabOptions[0].list.length">
            <div class="taskLis taskLis_one" @click="tapSelectChange(item)" :class="item.id == selected.id ? 'taskLisSelect' : ''" v-for="(item, index) in tabOptions[0].list" :key="index">
              <div class="taskLis_left">
                <img :src="item.pic" alt="" />
              </div>
              <div class="taskLis_right">
                <div class="taskLis_right-top">
                  <div class="title">{{ item.name }}
                    <span>({{ item.record_count }}/{{ item.limit == 0?'无限':item.limit }})</span>
                  </div>
                  <div class="loveTxt">{{ item.love_amount }}{{ usable_name }}</div>
                </div>
                <div class="taskLis_right-time">
                  <div class="time">有效期{{ item.active_days }}天</div>
                  <!-- <div class="totalCount">({{ item.record_count }}/{{ item.limit == 0?'无限':item.limit }})</div> -->
                  <div class="totalCount" @click="exchang">兑换</div>
                </div>
                <div class="taskLis_right-count">
                  <div class="countlis">收益率 {{ item.return_rate }}</div>
                  <div class="countlis">总释放 {{ item.total_amount }}</div>
                  <div class="countlis">日释放 {{ item.daily_amount }}</div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </van-tab>
      <van-tab title="运行中">
        <div class="List" v-show="active == 1">
          <template v-if="tabOptions[1] && tabOptions[1].list.length">
            <div class="cloum taskLis_two" v-for="(item, index) in tabOptions[1].list" :key="index" @click="tapTask(item.id)">
              <div class="taskLis">
                <div class="taskLis_left"><img :src="item.pic" alt="" /></div>
                <div class="taskLis_right">
                  <div class="taskLis_right-top">
                    <div class="title">{{ item.name }}</div>
                    <div class="loveTxt">{{ item.love_amount }}{{ usable_name }}</div>
                  </div>
                  <div class="taskLis_right-time">
                    <div class="time">有效期 {{ item.active_start }}至 {{ item.active_end }}</div>
                  </div>
                  <div class="taskLis_right-count">
                    <div class="countlis">收益率 {{ item.return_rate }}</div>
                    <div class="countlis">总释放 {{ item.total_amount }}</div>
                    <div class="countlis">日释放 {{ item.daily_amount }}</div>
                  </div>
                </div>
              </div>
              <div class="schedule">
                <div class="line"></div>
                <div class="txt">
                  任务:观看
                  <span class="dcolor">{{ item.daily.video }}/{{ item.task_reach_video }}</span>
                  个视频，分享<span class="dcolor">{{ item.daily.share }}/{{ item.task_reach_share }}</span
                  >个视频，转发<span class="dcolor">{{ item.daily.article }}/{{ item.task_reach_article }}</span
                  >篇文章
                </div>
              </div>
            </div>
          </template>
        </div>
      </van-tab>
      <van-tab title="已过期">
        <div class="List" v-show="active == 2">
          <template v-if="tabOptions[2] && tabOptions[2].list.length">
            <div class="cloum taskLis_two" v-for="(item, index) in tabOptions[2].list" :key="index" @click="tapTask(item.id)">
              <div class="taskLis">
                <div class="taskLis_left"><img :src="item.pic" alt="" /></div>
                <div class="taskLis_right">
                  <div class="taskLis_right-top">
                    <div class="title">{{ item.name }}</div>
                    <div class="loveTxt">{{ item.love_amount }}{{ usable_name }}</div>
                  </div>
                  <div class="taskLis_right-time">
                    <div class="time">有效期 {{ item.active_start }}至 {{ item.active_end }}</div>
                  </div>
                  <div class="taskLis_right-count">
                    <div class="countlis">收益率 {{ item.return_rate }}</div>
                    <div class="countlis">总释放 {{ item.total_amount }}</div>
                    <div class="countlis">日释放 {{ item.daily_amount }}</div>
                  </div>
                </div>
              </div>
              <div class="schedule">
                <div class="line"></div>
                <div class="txt">
                  任务:观看
                  <span class="dcolor">{{ item.daily.video }}</span>
                  个视频，分享<span class="dcolor">{{ item.daily.share }}</span
                  >个视频，转发<span class="dcolor">{{ item.daily.article }}</span
                  >篇文章
                </div>
              </div>
            </div>
          </template>
        </div>
      </van-tab>
    </van-tabs>

    <div class="myBtn set-pc-style" @click="toMyTask" v-if="active != 2">
      <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2FtaskPackage%2Fmy2%402x.png" alt="" />
    </div>
    <!-- <div class="bottomBtn set-pc-style" v-show="active == 0" @click="exchang">
      <div class="btn">兑换</div>
    </div> -->
  </div>
</template>
<script>
import { scrollMixin } from "@/utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 0,
      selected: {},
      isLoadMore: true,
      usable_name: "", //爱心值名称
      tabOptions: [
        {
          isLoadMore: true,
          page: 1,
          total_page: 0,
          list: [],
          url: "plugin.task-package.frontend.bag.get-list",
          othderJson: {},
          name: "任务商城"
        },
        {
          isLoadMore: true,
          page: 1,
          total_page: 0,
          list: [],
          url: "plugin.task-package.frontend.record.get-list",
          othderJson: { status: 1 },
          name: "运行中"
        },
        {
          isLoadMore: true,
          page: 1,
          total_page: 0,
          list: [],
          url: "plugin.task-package.frontend.record.get-list",
          othderJson: { status: 2 },
          name: "已过期"
        }
      ]
    };
  },
  activated() {
    this.initData();
    this.getData();
  },
  methods: {
    initData() {
      this.active = 0;
      this.isLoadMore = true;
      this.tabOptions = [
        {
          isLoadMore: true,
          page: 1,
          total_page: 0,
          list: [],
          url: "plugin.task-package.frontend.bag.get-list",
          othderJson: {},
          name: "任务商城"
        },
        {
          isLoadMore: true,
          page: 1,
          total_page: 0,
          list: [],
          url: "plugin.task-package.frontend.record.get-list",
          othderJson: { status: 1 },
          name: "运行中"
        },
        {
          isLoadMore: true,
          page: 1,
          total_page: 0,
          list: [],
          url: "plugin.task-package.frontend.record.get-list",
          othderJson: { status: 2 },
          name: "已过期"
        }
      ];
    },
    toMyTask() {
      this.$router.push(this.fun.getUrl("taskPackageMy", {}));
    },
    async getData() {
      if (!this.fun.isTextEmpty(this.tabOptions[this.active].list)) {
        this.isLoadMore = this.tabOptions[this.active].isLoadMore;
        return;
      }
      let json = { ...this.tabOptions[this.active].othderJson, page: 1 };
      let { result, msg, data } = await $http.get(this.tabOptions[this.active].url, json, ".");
      if (result == 0) {return this.$toast(msg);}
      // if (result == 0){
      //   this.$dialog.alert({
      //     title: '标题',
      //     message: msg,
      //   }).then(() => {
      //     // data中带task_package_invite_code=1，跳转到填写邀请码页面；data中带task_package_real_name_auth=1，跳转到填写实名认证页面
      //     if(data.task_package_invite_code == -1) this.$router.push(this.fun.getUrl("taskPackageMiddle", {}));
      //   });
      //   return
      // }

      this.tabOptions[this.active].list = data.data || [];
      this.tabOptions[this.active].total_page = data.last_page;
      this.tabOptions[this.active].isLoadMore = true;
      this.isLoadMore = true;
      console.log(this.tabOptions, "dddddddddd");
      this.usable_name = data.usable_name;
      if (this.active == 0) this.selected = this.tabOptions[0].list[0];
    },
    async getMoreData() {
      console.log(this.tabOptions[this.active].page, this.tabOptions[this.active].total_page);
      this.tabOptions[this.active].isLoadMore = false;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.tabOptions[this.active].page >= this.tabOptions[this.active].total_page) {
        return;
      }
      this.tabOptions[this.active].page = this.tabOptions[this.active].page + 1;
      let page = this.tabOptions[this.active].page;
      let json = {
        ...this.tabOptions[this.active].othderJson,
        page
      };
      let { result, msg, data } = await $http.get(this.tabOptions[this.active].url, json, ".");
      this.isLoadMore = true;
      this.tabOptions[this.active].isLoadMore = true;
      if (result == 0) return this.$toast(msg);
      this.tabOptions[this.active].list = this.tabOptions[this.active].list.concat(data.data);
      this.tabOptions[this.active].total_page = data.last_page;
    },
    tapSelectChange(item) {
      this.selected = item;
    },
    tapTask(kid) {
      this.$router.push(this.fun.getUrl("taskPackageTask", { id: kid }));
    },
    exchang() {
      if (!this.selected.id) {
        this.$dialog.alert({
          message: "请选择需要兑换的任务"
        });
        return;
      }
      this.$dialog
        .confirm({
          message: `是否确定用${this.selected.love_amount}${this.usable_name}兑换该任务包?`
        })
        .then(() => {
          $http.post("plugin.task-package.frontend.record.exchange-bag", { id: this.selected.id }, " ").then(response => {
            this.$dialog
              .alert({
                message: response.msg
              })
              .then(() => {
                if (response.result == 1) {
                  this.initData();
                  this.getData();
                }
              });
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.bottomBtn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3.13rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;

  .btn {
    width: 20rem;
    height: 2.5rem;
    text-align: center;
    line-height: 2.5rem;
    background: #f51d1d;
    border-radius: 0.31rem;
    font-size: 0.94rem;
    color: #fff;
  }
}

.myBtn {
  position: fixed;
  bottom: 8.22rem;
  right: 1.06rem;
  border-radius: 100%;
  width: 2.53rem;
  height: 2.53rem;

  img {
    width: 2.53rem;
    height: 2.53rem;
    border-radius: 100%;
  }
}

.List {
  margin: 0.63rem;
  padding-bottom: 4rem;

  .schedule {
    padding: 0 0.63rem;
    background: #fff;
    text-align: left;

    .line {
      width: 100%;
      height: 1.0016px;
      background: #dfdfdf;
    }

    .txt {
      padding: 0.75rem 0;
      box-sizing: border-box;
      font-size: 0.69rem;

      .dcolor {
        color: #f51d1d;
      }
    }
  }

  .taskLis_one {
    margin-bottom: 0.63rem;
  }

  .taskLis_two {
    margin-bottom: 0.63rem;
  }

  .taskLis {
    padding: 0.72rem 0.63rem;
    border-radius: 0.31rem;
    background: #fff;
    display: flex;
    align-items: center;
    border: 1px solid #fff;

    .taskLis_right {
      flex: 1;
      overflow: hidden;

      .taskLis_right-top {
        display: flex;
        justify-content: space-between;

        .title {
          flex: 1;
          font-size: 0.81rem;
          text-align: left;
          margin-right: 1.31rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;

          span {
            color: #66a3e7;
          }
        }

        .loveTxt {
          flex-shrink: 0;
          color: #f51d1d;
          font-size: 0.69rem;
          max-width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .taskLis_right-time {
        font-size: 0.63rem;
        color: #807e7e;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.66rem 0 0.81rem 0;

        .totalCount {
          color: #f51d1d;
          padding: 0.125rem 0.5rem;
          border: 1px solid #f51d1d;
          border-radius: 0.5rem;
        }
      }

      .taskLis_right-count {
        display: flex;

        .countlis:last-child {
          margin-right: 0;
        }

        .countlis {
          font-size: 0.63rem;
          color: #4c4c4c;
          font-weight: 400;
          margin-right: 1.09rem;
        }
      }
    }

    .taskLis_left {
      flex-shrink: 0;
      width: 4.38rem;
      height: 4.38rem;
      background: #8b8b8b;
      border-radius: 0.19rem;
      margin-right: 0.59rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    }
  }

  .taskLisSelect {
    border: 1.0016px solid #f51d1d;
  }
}
</style>
